<template>
  <div class="page">
    <div class="handlePart">
      <el-form :inline="true" :model="form">
        <el-form-item label="取水户名称:">
          <el-input size="small" style="width: 150px;" v-model="form.dictName" placeholder="取水户名称"></el-input>
        </el-form-item>
        <el-form-item label="取水口名称:">
          <el-input size="small" style="width: 150px;" v-model="form.dictName" placeholder="取水户名称"></el-input>
        </el-form-item>
        <el-form-item label="行政分区:">
          <el-cascader v-model="form.basinUnit" size="small" style="width: 150px;" :options="basinOptions" placeholder="请选择" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="流域分区:">
          <el-cascader  v-model="form.basinUnit2" size="small" style="width: 150px;" :options="basinOptions" placeholder="请选择" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="监测年份:">
          <el-date-picker
          style="width: 130px;"
            size="small" 
            v-model="form.jcsj"
            type="date"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="warning" icon="el-icon-clear" @click="search">清空</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" icon="el-icon-download" @click="search">数据导出</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="dels">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tablePart">
      <el-table :data="list" :height="'calc(100vh - 290px)'" stripe style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号"  type="index" align="center" width="55"></el-table-column>
        <el-table-column prop="dictName" label="取水户编码" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="取水权力人名称" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="取水口编码" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="取水口名称" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="行政单元" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="流域单元" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="统计水量" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="统计用途" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="储水水量" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="饮水水量" align="center"> </el-table-column>
        <el-table-column prop="dictName" label="提水水量" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" title="编辑" @click="edit(scope.row)"></el-button>
            <el-button type="text" icon="el-icon-delete" title="删除" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagePart">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-sizes="[10, 20, 30, 40, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <EditDialog ref="editDialogRef" @listInit="listInit" />
    <!-- <DetailDialog ref="detailDialogRef" /> -->
  </div>
</template>
<script>
import EditDialog from './editDialog.vue';
// import DetailDialog from './detailDialog.vue';
export default {
  data() {
    return {
      form: {
        basinUnit: [],
        basinUnit2: [],
        dmlx: '',
        jcrq: '',
        keywords: '',
        orderBy: "create_time desc"
      },
      list: [],
      page: 1,
      size: 10,
      total: 0,
      selectList: [],
      basinOptions: [
        {
          value: 'option1',
          label: '流域1',
          children: [
            {
              value: 'option1-1',
              label: '子流域1-1',
              children: [
                {
                  value: 'option1-1-1',
                  label: '单元1-1-1'
                }
              ]
            }
          ]
        },
        {
          value: 'option2',
          label: '流域2',
          children: [
            {
              value: 'option2-1',
              label: '子流域2-1',
              children: [
                {
                  value: 'option2-1-1',
                  label: '单元2-1-1'
                }
              ]
            }
          ]
        }
      ],
    };
  },
  mounted() {
    this.listInit();
    // this.$api.getDictList({page:1,size:1000})
    // this.$api.getDictDetail({dicGuid: '1391306323524675'})
  },
  methods: {
    listInit() {
      let params = Object.assign({},this.form,{
        size: this.size,
        page: this.page,
        orderBy: "create_time desc"
      })
      this.$api.getDictList(params).then((res) => {
        if(res && res.code == 200){
          let data = res.data || {}
          this.total = data.total || 0
          this.list = data.list || []
        }
      })
    },
    // 查询
    search(){
      this.page = 1
      this.listInit()
    },
    // 新增
    add() {
      this.$refs.editDialogRef.showModal('add');
    },
    // 编辑
    edit(row) {
      this.$refs.editDialogRef.showModal('edit', row);
    },
    // 配置
    config(row){
      // this.$refs.detailDialogRef.showModal(row);
    },
    // 删除
    del(row){
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.delDict([row.sysDictId]).then(res => {
            if(res && res.code == 200){
              this.$notify.success({
            title: '成功',
                message: '删除成功!'
              });
              this.listInit()
            }
          })
        }).catch(() => {});
    },
    // 批量删除
    dels(){
      if(this.selectList.length == 0){
        this.$notify.warning({
          title: '警告',
          message: '请至少选择一条数据！'
        });
        return
      }
      let ids = []
      this.selectList.forEach(l => {
        ids.push(l.sysDictId)
      })
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.delDict(ids).then(res => {
            if(res && res.code == 200){
              this.$notify.success({
                title: '成功',
                message: '删除成功!'
              });
              this.listInit()
            }
          })
        }).catch(() => {});
    },
    // 多选
    handleSelectionChange(val) {
      this.selectList = val;
    },
    // size change
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page = 1;
      this.size = val;
      this.listInit();
    },
    // page change
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.listInit();
    },
  },
  components: { EditDialog }
};
</script>

<style lang="less">
.tips {
 cursor: pointer;
 margin-left: -8px;
    margin-right: 5px;
    color:#2196f3;
}
</style>
